<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" name="referrer" content="strict-origin-when-cross-origin">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>OpenLayers学习导航页</title>
    <script src="../../assets/script/jquery-2.1.1.min.js"></script>
    <script src="../../assets/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../../assets/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../../assets/bootstrap/css/bootstrap-theme.css">
    <style>
        a {
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <h1>OpenLayers学习导航页</h1>
    <div class="row">
        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading">地图篇</div>
                <div class="panel-body">
                    <ul id="map">
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading">数据源</div>
                <div class="panel-body">
                    <ul id="datasource">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">样式</div>
        <div class="panel-body">
            <ul id="style">

            </ul>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">控件</div>
        <div class="panel-body">
            <ul id="control">

            </ul>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">交互</div>
        <div class="panel-body">
            <ul id="interactive">

            </ul>
        </div>
    </div>
</div>
</body>
<script>
    let data = {
        "map": [
            {src: "map/01-tianditu.html", title: "加载天地图"},
            {src: "map/03-baidu.html", title: "加载百度地图"},
            {src: "map/04-gaode.html", title: "加载高德地图"},
            {src: "map/06-grid.html", title: "加载网格信息"},
            {src: "map/07-proj4.html", title: "地图投影转换"},
            {src: "map/08-heatmap.html", title: "可视化之热力图"},
            {src: "map/09-mapstatus.html", title: "获取地图状态"}
        ],
        "datasource": [
            {src: "datasource/01-geojson.html", title: "加载GeoJSON数据"}
        ],
        "style": [
            {src: "map/01-tianditu.html", title: "加载天地图"}
        ],
        "control": [
            {src: "map/01-index.html", title: "加载常用控件（一）"}
        ],
        "interactive": [
            {src: "interactive/04-shp.html", title: "上传Shapefile文件"}
        ]
    }
    $(function () {
        initMapGroup();
        initDataSource();
        initStyle();
        initControl();
        initInteractive();
    })

    function initMapGroup() {
        let array = data.map;
        for (let i = 0; i < array.length; i++) {
            $('#map').append("<a class='btn btn-default' href='" + array[i].src + "'>" + array[i].title + "</a>")
        }
    }

    function initDataSource() {
        let array = data.datasource;
        for (let i = 0; i < array.length; i++) {
            $('#datasource').append("<a class='btn btn-default' href='" + array[i].src + "'>" + array[i].title + "</a>")
        }
    }

    function initStyle() {
        let array = data.style;
        for (let i = 0; i < array.length; i++) {
            $('#style').append("<a class='btn btn-default' href='" + array[i].src + "'>" + array[i].title + "</a>")
        }
    }

    function initControl() {
        let array = data.control;
        for (let i = 0; i < array.length; i++) {
            $('#control').append("<a class='btn btn-default' href='" + array[i].src + "'>" + array[i].title + "</a>")
        }
    }

    function initInteractive() {
        let array = data.interactive;
        for (let i = 0; i < array.length; i++) {
            $('#interactive').append("<a class='btn btn-default' href='" + array[i].src + "'>" + array[i].title + "</a>")
        }
    }
</script>

</html>
